<template>
  <div class="dialog">
    <el-dialog
      :title="'维修节点配置'+titleText"
      :visible.sync="showDialog"
      width="45%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item
          v-if="editObject.type === 'process'"
          label="审批类型："
          class="w100p"
          prop="approvalType"
        >
          <el-radio-group v-model="formData.approvalType">
            <el-radio :label="'依次审批'">依次审批</el-radio>
            <el-radio :label="'会签'">会签（须所有审批人同意）</el-radio>
            <el-radio :label="'或签'">或签（一名审批人同意或拒绝即可）</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          v-if="editObject.type === 'process'"
          label="审核人："
          class="w100p"
          prop="processTemplatePersonMapperList"
        >
          <el-select
            v-model="formData.processTemplatePersonMapperList"
            clearable
            filterable
            placeholder="选择审核人"
            multiple
            value-key="personNo"
            @change="(e) => {
              // $nextTick(() => {
              //   $set(formData.processTemplatePersonMapperList[formData.processTemplatePersonMapperList.length - 1], 'sort', formData.processTemplatePersonMapperList.length)
              // })
            }"
          >
            <el-option
              v-for="item of userList"
              :key="item.userId"
              :label="item.account"
              :value="{ personName:item.account, personNo: item.personNo }"
            />
          </el-select>
        </el-form-item>


        <el-form-item
          v-if="editObject.type === 'process'"
          label="排序："
          class="w100p"
        >
            <draggable
              v-model="formData.processTemplatePersonMapperList"
              group="site"
              animation="300"
              class="contain"
              @end="end"
              @change="handleChange"
            >
              <div v-for="item,index in formData.processTemplatePersonMapperList" :key="index" class="items">
                <b class="fieldI">{{index + 1}}</b>
                <div class="field">{{ item.personName }}</div>
                <div class="icon">
                  <img src="@/assets/table_column_sort.png" />
                </div>
              </div>
            </draggable>
        </el-form-item>
        <el-form-item
          v-if="editObject.type === 'Handle'"
          label="处理人："
          class="w100p"
          prop="processTemplateHandlePersonMapperList"
        >
          <el-select
            v-model="formData.processTemplateHandlePersonMapperList"
            clearable
            filterable
            placeholder="选择处理人"
            multiple
            value-key="personNo"
            multiple-limit="1"
          >
            <el-option
              v-for="item of userList"
              :key="item.userId"
              :label="item.account"
              :value="{ personName:item.account, personNo: item.personNo }"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="cancelbtn"
          @click="cancel()"
        >取 消</el-button>
        <el-button
          type="primary"
          class="savebtn"
          @click="save('ruleForm')"
        >保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import nodeConfigApi from "@/api/equip-repair-manage/node-config";
import userApi from "@/api/system-settings/user-manage";
import draggable from "vuedraggable";

export default {
  name: "",
  components: { draggable },
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {},
      rules: {
        approvalType: [
          {
            required: true,
            message: "请选择审批类型",
            trigger: ["change", "blur"]
          }
        ],

        processTemplatePersonMapperList: [
          {
            type: "array",
            required: true,
            message: "请选择审核人",
            trigger: ["change", "blur"]
          }
        ],
        processTemplateHandlePersonMapperList: [
          {
            type: "array",
            required: true,
            message: "请选择处理人",
            trigger: ["change", "blur"]
          }
        ]
      },
      userList: [],
      processNodeTypeList: [
        {
          name: "委内维修",
          value: "委内维修"
        },
        {
          name: "委外维修",
          value: "委外维修"
        },
        {
          name: "报废",
          value: "报废"
        }
      ],
      showDialog: this.show,
      nodeConfigList: []
    };
  },
  computed: {
    processNodeType() {
      // console.log(this.resArr(this.processNodeTypeList, this.nodeConfigList, 'value', 'processNodeType'), 'nodeConfigApi')
      return this.resArr(
        this.processNodeTypeList,
        this.nodeConfigList,
        "processNodeType",
        "value"
      );
    }
  },
  watch: {
    show(v) {
      this.showDialog = v;
    },
    nowChanceStau(v) {
      this.formData = this.editObject;
    }
  },
  created() {
    this.queryUserList();
    this.queryList();
  },
  mounted() {},
  methods: {
    handleChange({moved}) {
      console.log(moved);
      // this.$set(this.formData.processTemplatePersonMapperList[moved.newIndex], 'sort', moved.newIndex + 1)
      // this.$set(this.formData.processTemplatePersonMapperList[moved.oldIndex], 'sort', moved.oldIndex + 1)
    },
    end() {},
    resArr(arr1, arr2, id1, id2) {
      return arr1.filter(v => arr2.every(val => val[id1] != v[id2]));
    },
    // 查询可选择维修人
    queryUserList() {
      userApi.queryUserAll({}).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          this.userList = data;
        }
      });
    },
    // 查询可选择维修人
    async queryList() {
      // userApi.queryUserAll({}).then((res) => {
      //   if (res.code === 1) {
      //     let data = res.data || [];
      //     this.userList = data;
      //   }
      // });
      const { data: data } = await nodeConfigApi.queryPageList({
        page: 1,
        size: 100,
        entity: { organizationNo: sessionStorage.organizationNo }
      });
      // console.log(data, 'nodeConfigApi')
      this.nodeConfigList = data.content;
    },
    save(formData) {
      // console.log(this.formData)
      // return
      this.$refs[formData].validate(valid => {
        if (valid) {
          // this.formData.organizationNo = sessionStorage.organizationNo;
          if (this.formData.processTemplatePersonMapperList&&this.formData.processTemplatePersonMapperList.length > 0) {
            this.$set(this.formData, "processTemplatePersonMapperList",
            this.formData.processTemplatePersonMapperList.map(item => {
              delete item.sort
              return {
                ...item
              }}))
          }
          nodeConfigApi.edit(this.formData).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg || "添加成功！");
              this.queryList();
              this.close();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    close() {
      this.$refs["ruleForm"]?.clearValidate();
      this.$emit("closeDialog");
    },
    cancel() {
      this.$refs["ruleForm"]?.clearValidate();
      this.$emit("cancelDialog");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio-group {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #006e91;
    background: #006e91;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #006e91;
  }
}
.contain {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .items {
    margin-right: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  border: 1px solid #006e91;
  border-radius: 5px;
  padding: 2px 10px;
  .fieldI {
    margin-right: 5px;
  }
  .field {
    margin-right: 10px;
    color: #006e91;
  }
  }
}
</style>
